<template>
  <div class="cont">
    <ul class="userList">
      <li>
        <span>姓名</span>
        <span>年龄</span>
        <span>性别</span>
        <span class="font">电话</span>
        <span>编辑</span>
      </li>
      <li v-for="(val, key) in arr" :key="val.phone">
        <span>{{val.name}}</span>
        <span>{{val.age}}</span>
        <span>{{val.gender|toGender}}</span>
        <span class="font">{{val.phone}}</span>
        <span @click="delOneFromArr(key)">删除</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ['test'],
  data () {
    return {
      currentKey: -1
    }
  },
  methods: {
    delOneFromArr (index) {
      this.test.splice(index, 1)
    }
  },
  computed: {
    arr () {
      const mobileReg = /^1(3[4-9]|47|5[012789]|8[2378])\d{8}$/
      const selectedHandle = {
        '-1': () => this.test,
        0: () => this.test.filter(v => v.gender),
        1: () => this.test.filter(v => !v.gender),
        2: () => this.test.filter(v => mobileReg.test(v.phone)),
        3: () => [...this.test].sort((prev, next) => prev.age - next.age)
      }
      return selectedHandle[this.currentKey]()
    }
  },
  filters: {
    toGender (val) {
      return val ? '男' : '女'
    }
  },
  created () {
    this.$bus.$on('changeCurrentKey', (key) => {
      this.currentKey = key
    })
  }
}
</script>
<style scoped>
  .cont{
    overflow: auto;
    height: 560px;
  }
  .userList {
    list-style: none;
    padding: 0;
  }
  li {
    height: 50px;
    font-size: 0;
    border-bottom: 1px solid gainsboro;
  }
  span{
    display: inline-block;
    width: 18vw;
    font-size: 15px;
    text-align: center;
    line-height: 50px;
    color: #555;
  }
  .font{
    display: inline-block;
    width: 28vw;
    font-size: 15px;
    text-align: center;
    line-height: 40px;
    color: #555;
  }
</style>
